const canvas = document.getElementById('gameUI');
const context = canvas.getContext('2d');
const images = {};
const list=['../image/tex1.jpg','../image/tex2.jpg','../image/tex3.jpg','../image/tex4.jpg'];   //添加需要使用到的材质图片路径


//加载绘制图片
function getImageUrl(url)
{
    return images[url];
}

//加载一张图片
function loadImage(url,callback)
{
    const image= new Image();
    image.src=url;
    image.onload=function()
    {   
        images[url]=image;
        callback();
    }

}

//加载多张图片
function loadMultiImage(list, onSuccess)
{
    let current=0;
    const total=list.length;
    for(const item of list)
    {
    loadImage(item,function(){
        current++;
         if(current === total)
          {
            onSuccess();
          }
        })
    }
}

class AbstractRenderer {
    /**
     * 父节点
     */
    parent = null
    /**
     * x缩放
     */
    scaleX = 1;
    /**
     * y缩放
     */
    scaleY = 1;
    /**
     * 旋转
     */
    rotation = 0;
    /**
     * x平移
     */
    x = 0;
    /**
     * y平移
     */
    y = 0;


    /**
     * 是否可见
     */
    visible = true;

    /**
     * 透明度
     */
    alpha = 1;

    /**
     * 全局透明度
     */
    $globalAlpha = 1;

    /**
     * 相对矩阵
     */
    $localMatrix;

    /**
     * 绝对矩阵
     */
    $globalMatrix;
    
    constructor() {
        this.$localMatrix = new Matrix();
        this.$globalMatrix = new Matrix();
    }

    calculateGlobalProperties() {
        this.$localMatrix.updateFromDisplayObject(this.x, this.y, this.scaleX, this.scaleY, this.rotation);
        this.$globalMatrix = matrixAppendMatrix(this.$localMatrix, this.parent.$globalMatrix);
        this.$globalAlpha = this.parent.$globalAlpha * this.alpha;
    }


    //提供可重写的渲染函数接口
    draw(context) {
        this.calculateGlobalProperties();

        context.setTransform(
            this.$globalMatrix.a,
            this.$globalMatrix.b,
            this.$globalMatrix.c,
            this.$globalMatrix.d,
            this.$globalMatrix.tx,
            this.$globalMatrix.ty
        )
        context.globalAlpha = this.$globalAlpha;

        if (this.visible) 
        {
            this.render(context);
        }
    }
    
    render(context) {}
    
    /*移动方向 0为左右，1为上下*/
    movedirection ;
    /*回头标志符*/
    isback ;
    /*移动的下限和上限*/
    range = [] ;
    /*移动速度*/
    speed;
    
    move()    { }
}


class DisplayObjectContainer extends AbstractRenderer {

    children = [];

    addChild(child) {
        const index = this.children.indexOf(child);
        child.parent = this;
        if (index == -1) {
            this.children.push(child);
        }
    }

    removeChild(child) {
        const index = this.children.indexOf(child);
        child.parent = null;
        if (index >= 0) {
            this.children.splice(index, 1);
        }
    }

    render(context) {
        for (let child of this.children) {
            child.draw(context);
        }
    }
}

class RootContainer extends DisplayObjectContainer {

    calculateGlobalProperties() {

    }
}



//绘制背景
class drawBackGoound extends AbstractRenderer 
{   
    color="black";
    render(context){
    context.fillStyle=this.color;
    context.fillRect(0,0,400,400);
    }
}

//绘制其他
class drawOther extends AbstractRenderer
{
    render(context)
   {
    //绘制所有豆子
    drawAllBeans(2.2,"pink",15);

    //绘制外边界
    drawBorder();

    //绘制中心圆角矩形
    drawMRR(200,200,80,60,'blue','white');

    //绘制图片裁剪区域
    //drawClip();
   }
}

//绘制圆角矩形
class drawRR extends AbstractRenderer
{   
    x=0;
    y=0;
    w=0;
    l=0;
    color=null;
    render(context)
    {
    context.strokeStyle=this.color;
    context.lineWidth=2;
    baseRect(0,0,this.w,this.l);
    context.stroke();
    }
}

//绘制下T型地形
class  drawDT extends AbstractRenderer
{   
    x=0;
    y=0;
    color=null;
    render(context)
    {context.strokeStyle=this.color;
    context.lineWidth=2;
    baseDT(0,0);
    context.stroke();}
}

//绘制上T型地形
class drawUT extends AbstractRenderer
    {  
    x=0;
    y=0;
    color=null;
    render(context){
    let Halfw=30;
    let Halfl=0;
    context.strokeStyle=this.color;
    context.lineWidth=2;
    context.beginPath();
    context.moveTo(-Halfw,-10);
    context.lineTo(-20,-10);
    drawRC(-20,-20,4,1);
    context.lineTo(-10,-40);
    drawRC(0,-40,1,0);
    drawRC(0,-40,2,0);
    context.lineTo(10,-20);
    drawRC(20,-20,3,1);
    context.lineTo(+Halfw,-10);
    drawRC(Halfw,-Halfl,2,0);
    drawRC(Halfw,Halfl,4,0);
    context.lineTo(20,Halfl+10);
    context.lineTo(-Halfw,10);
    drawRC(-Halfw,0,3,0);
    drawRC(-Halfw,0,1,0); 
    context.stroke();
    }
}

//绘制右T型地形
class drawRT extends AbstractRenderer
{
    x=0;
    y=0;
    color=null;
    render(context){
    context.strokeStyle=this.color;
    context.lineWidth=2;
    baseRT(0,0);
    context.stroke();
    }
}

//绘制左T型地形
class drawLT extends AbstractRenderer
{
    x=0;
    y=0;
    color=null;
    render(context){
    context.strokeStyle=this.color;
    context.lineWidth=2;
    baseLT(0,0);
    context.stroke();}
}


//绘制右凹形
class drawRConcave extends AbstractRenderer
{   
    x=0;
    y=0;
    color=null;
    render(context){
    let Halfl=30;
    let Halfw=30;
    context.strokeStyle=this.color;
    context.lineWidth=2;
    context.beginPath();
    context.moveTo(-10,Halfl+10);
    context.lineTo(-10,-Halfl);
    drawRC(0,-Halfl,1,0);
    context.lineTo(Halfw+10,-Halfl-10);
    drawRC(Halfw+10,-Halfl,2,0);
    drawRC(Halfw+10,-Halfl,4,0);
    context.lineTo(+20,-Halfl+10);
    drawRC(20,-Halfl+20,1,1);
    context.lineTo(10,Halfl-10);
    drawRC(20,Halfl-10,3,1);
    context.lineTo(Halfw+5,Halfl);
    drawRC(Halfw+5,Halfl+10,2,0);
    drawRC(Halfw+5,Halfl+10,4,0);
    context.lineTo(0,Halfl+20);
    drawRC(0,Halfl+10,3,0);
    context.stroke();}

}

//绘制左凹形
class drawLConcave extends AbstractRenderer
{  
    x=0;
    y=0;
    color=null;
    render(context){
    let Halfl=30;
    let Halfw=30;
    context.strokeStyle=this.color;
    context.lineWidth=2;
    context.beginPath();
    context.moveTo(10,Halfl+10);
    context.lineTo(10,-Halfl);
    drawRC(0,-Halfl,2,1);
    context.lineTo(-Halfw-10,-Halfl-10);
    drawRC(-Halfw-10,-Halfl,1,1);
    drawRC(-Halfw-10,-Halfl,3,1);
    context.lineTo(-20,-Halfl+10);
    drawRC(-20,-Halfl+20,2,0);
    context.lineTo(-10,Halfl-10);
    drawRC(-20,Halfl-10,4,0);
    context.lineTo(-Halfw-5,Halfl);
    drawRC(-Halfw-5,Halfl+10,1,1);
    drawRC(-Halfw-5,Halfl+10,3,1);
    context.lineTo(0,Halfl+20);
    drawRC(0,Halfl+10,4,1);
    context.stroke();
    }
}

//绘制右直角型
class drawRTR extends AbstractRenderer
{   
    x=0;
    y=0;
    color=null;
    render(context){
    let Halfl=20;
    let Halfw=30;
    context.strokeStyle=this.color;
    context.lineWidth=2;
    context.beginPath();
    context.moveTo(10,-Halfl);
    context.lineTo(10,Halfl);
    drawRC(0,Halfl,4,0);
    drawRC(0,Halfl,3,0);
    context.lineTo(-10,-Halfl+20);
    drawRC(-20,-Halfl+20,2,1);
    context.lineTo(-Halfw,-Halfl+10);
    drawRC(-Halfw,-Halfl,3,0);
    drawRC(-Halfw,-Halfl,1,0);
    context.lineTo(0,-Halfl-10);
    drawRC(0,-Halfw+10,2,0);
    context.stroke();
    }

}

//绘制左直角型
class drawLTR extends AbstractRenderer
{   
    x=0;
    y=0;
    color=null;
    render(context){
    let Halfl=20;
    let Halfw=30;
    context.strokeStyle=this.color;
    context.lineWidth=2;
    context.beginPath();
    context.moveTo(-10,-Halfl);
    context.lineTo(-10,Halfl);
    drawRC(0,Halfl,3,1);
    drawRC(0,Halfl,4,1);
    context.lineTo(10,-Halfl+20);
    drawRC(20,-Halfl+20,1,0);
    context.lineTo(Halfw,-Halfl+10);
    drawRC(Halfw,-Halfl,4,1);
    drawRC(Halfw,-Halfl,2,1);
    context.lineTo(0,-Halfl-10);
    drawRC(0,-Halfw+10,1,1);
    context.stroke();
    }

}

//绘制吃豆人
class drawPlayer extends AbstractRenderer
{ 
   x=0;
   y=0;
   color=null;
   render(context){ 
   context.beginPath();
   let startAngle = (Math.PI/180)*330; // 开始点
   let endAngle = (Math.PI/180)*30;  //结束点
   context.arc(0,0,7,startAngle,endAngle,true); //false是顺时针clockwise绘制，true是逆时针anticlockwise绘制。
   context.lineTo(-5,0);
   context.fillStyle=this.color;
   context.fill();
   }
}

//绘制小怪物
class  drawImp extends AbstractRenderer
{   
    x=0;
    y=0;
    righteye=0;
    lefteye=0;
    color=null;

    //绘制身体
    render(context){
    context.fillStyle = this.color;
    context.beginPath();
    context.moveTo(-10,10);
    context.lineTo(-10,0);
    context.arc(0,0,10,Math.PI,0,false);
    context.lineTo(10,10);
    context.lineTo(6.66,12);
    context.lineTo(3.33,10);
    context.lineTo(0,12);
    context.lineTo(-3.33,10);
    context.lineTo(-6.66,12);
    context.lineTo(-10,10);
    context.fill();
     //context.bezierCurveTo(83,94,89,88,97,88);      //贝塞尔曲线，分二次曲线quadraticCurveTo()和三次曲线bezierCurveTo()，1个控制点和1个结束点，2个控制点和1个结束点，起始点为上次操作的延续位置。
   
     //绘制眼白
    context.fillStyle = "white";
    context.beginPath();
    context.arc(4.5,0,4,0,Math.PI*2,true);
    context.fill();
    context.beginPath();
    context.arc(-4.5,0,4,0,Math.PI*2,true);
    context.fill(); 

    //绘制眼珠
    context.fillStyle = "black";
    context.beginPath();
    context.arc(this.righteye,1.5,1.8,0,Math.PI*2,true); //右眼珠
    context.fill();
    context.beginPath();
    context.arc(this.lefteye,1.5,1.8,0,Math.PI*2,true);  //左眼珠
    context.fill(); 
    }

    move()
    {
    if (this.movedirection === 1)
    {if ( this.isback === false )
       { this.y += this.speed;
        if(this.y >=this.range[1])
        this.isback = true;
        }
     else 
     {  this.y -= this.speed;
        if(this.y <=this.range[0])
        this.isback = false;
    }
    }
   else if (this.movedirection === 0)
    {if ( this.isback === false )
        { this.x += this.speed;
         if(this.x >=this.range[1])
         this.isback = true;
         }
      else 
      {  this.x -= this.speed;
         if(this.x <=this.range[0])
         this.isback = false;
     }
    }
    }
}

//绘制图片
class ImageRenderer extends AbstractRenderer {
    
    x=0;
    y=0;
    w=0;
    l=0;
    image = null;
    
    //重写接口函数
    render(context) {
        if (this.image) {
            context.drawImage(this.image, 0, 0, this.w, this.l);
        }

    }
}


class drawText extends AbstractRenderer {
    
    //初始值
    x=0;
    y=0;
    color = 'black';
    text = 'helloworld';

    render(context) {
        context.font="bold 18px serif"   //注意在字符串中应用变量的格式，不要漏了加号
        context.fillStyle = this.color;
        context.fillText(this.text, 0,0);
    }

}


//引擎核心
class GameEngineCore {

    onStart;

    onUpdate;

    root;
  
    cxt;

    //renderList = [];

    lastIterationTime = 0;

    lastAdvancedTime = 0;
  
    fps = 60;
    

    start() {
        this.root = new RootContainer();
        this.cxt = context;
        
        if(this.cxt)          
           console.log(this.cxt);
    
        else  console.log(`error!`);

        loadMultiImage(['../image/tex1.jpg', '../image/tex2.jpg', '../image/tex3.jpg', '../image/tex4.jpg'], this.onStart)
        requestAnimationFrame(this.onFrame.bind(this));
    }

    saveCanvas(){
        this.cxt.save();
     }
 
     restoreCanvas(){
         this.cxt.restore();
     }
 

    onFrame(advancedTime) {
        context.save();
        context.clearRect(0, 0, 400, 400)

        const duringTime = advancedTime - this.lastAdvancedTime;
        this.lastAdvancedTime = advancedTime;
        this.lastIterationTime += duringTime;
        const frameTime = 1000 / this.fps;
        
        while (this.lastIterationTime >= frameTime) {
            this.lastIterationTime -= frameTime;
            this.onUpdate(advancedTime);
        }
         
        /*
        //执行每个绘制对象中的draw方法，对渲染列表中的对象进行绘制
        for (let item of this.renderList) {
            item.draw(context);
        }
        */
        this.root.draw(context);
        context.restore();
        requestAnimationFrame(this.onFrame.bind(this));
    }

}



//绘制圆角
function drawRC(x,y,loc,dir)
{ 
   switch (loc){

    //绘制左上角圆弧
    case 1: 
    if(dir === 0)
        context.arc(x,y,radius,Math.PI,Math.PI*270/180,false);
        else if (dir === 1)
          context.arc(x,y,radius,Math.PI*270/180,Math.PI,true);
    break;

    //绘制右上角圆弧
    case 2:
    if(dir === 0)
        context.arc(x,y,radius,Math.PI*270/180,Math.PI*2,false);
        else if (dir === 1)
         context.arc(x,y,radius,Math.PI*2,Math.PI*270/180,true);
    break;

    //绘制左下角圆弧
    case 3:
    if(dir === 0)
        context.arc(x,y,radius,Math.PI*0.5,Math.PI,false);
        else if (dir === 1)
        context.arc(x,y,radius,Math.PI,Math.PI*0.5,true);
    break;

    //绘制右下角圆弧
    case 4:
    if(dir === 0)
        context.arc(x,y,radius,0,Math.PI*0.5,false);
        else if (dir ===1)
        context.arc(x,y,radius,Math.PI*0.5,0,true);
    break; 
   }

}


//基本矩形
function baseRect(x,y,w,l)
{
    var Halfw=(w-20)/2;
    var Halfl=(l-20)/2;

    context.moveTo(x-Halfw,y-Halfl-10);
    context.lineTo(x+Halfw,y-Halfl-10);
    drawRC(x+Halfw,y-Halfl,2,0);
    context.lineTo(x+Halfw+10,y+Halfl);
    drawRC(x+Halfw,y+Halfl,4,0);
    context.lineTo(x-Halfw,y+Halfl+10);
    drawRC(x-Halfw,y+Halfl,3,0);
    context.lineTo(x-Halfw-10,y-Halfl);
    drawRC(x-Halfw,y-Halfl,1,0);
}

//基本下T型
function baseDT(x,y)
{
    Halfw=30;
    Halfl=0;
    context.moveTo(x-Halfw,y-10);
    context.lineTo(x+Halfw,y-10);
    drawRC(x+Halfw,y-Halfl,2,0);
    drawRC(x+Halfw,y+Halfl,4,0);
    context.lineTo(x+20,y+Halfl+10);
    drawRC(x+20,y+Halfl+20,1,1);
    context.lineTo(x+10,y+30);
    drawRC(x,y+30,4,0);
    drawRC(x,y+30,3,0);
    context.lineTo(x-10,y+20);
    drawRC(x-20,y+20,2,1);
    context.lineTo(x-Halfw,y+10);
    drawRC(x-Halfw,y,3,0);
    drawRC(x-Halfw,y,1,0); 
}

//基本右T型
function  baseRT(x,y)
{
    Halfw=0;
    Halfl=40;
    context.moveTo(x-10,y+Halfl);
    context.lineTo(x-10,y-Halfl);
    drawRC(x,y-Halfl,1,0);
    drawRC(x,y-Halfl,2,0);
    context.lineTo(x+10,y-20);
    drawRC(x+20,y-20,3,1);
    context.lineTo(x+20,y-10);
    drawRC(x+20,y,2,0)
    drawRC(x+20,y,4,0);
    context.lineTo(x+20,y+10);
    drawRC(x+20,y+20,1,1);
    context.lineTo(x+10,y+Halfl);
    drawRC(x,y+Halfl,4,0);
    drawRC(x,y+Halfl,3,0);

}

//基本左T型
function baseLT(x,y)
{
    Halfw=0;
    Halfl=40;
    context.moveTo(x+10,y+Halfl);
    context.lineTo(x+10,y-Halfl);
    drawRC(x,y-Halfl,2,1);
    drawRC(x,y-Halfl,1,1);
    context.lineTo(x-10,y-20);
    drawRC(x-20,y-20,4,0);
    context.lineTo(x-20,y-10);
    drawRC(x-20,y,1,1);
    drawRC(x-20,y,3,1);
    context.lineTo(x-20,y+10);
    drawRC(x-20,y+20,2,0);
    context.lineTo(x-10,y+Halfl);
    drawRC(x,y+Halfl,3,1);
    drawRC(x,y+Halfl,4,1);
 
}

//绘制边界
function drawBorder()
{
context.strokeStyle='blue';
context.lineWidth=2;
context.beginPath();

//上部边界
drawRC(20,20,1,0);
context.lineTo(180,10);
drawRC(180,20,2,0);

context.lineTo(190,50);
drawRC(200,50,3,1);
drawRC(200,50,4,1);
context.lineTo(210,20);
drawRC(220,20,1,0);

context.lineTo(380,10);
drawRC(380,20,2,0);
context.lineTo(390,125);
drawRC(380,125,4,0);
context.lineTo(320,135);
drawRC(320,145,1,1);
context.lineTo(310,165);
drawRC(320,165,3,1);
context.lineTo(400,175);

context.moveTo(0,175);
context.lineTo(80,175);
drawRC(80,165,4,1);
context.lineTo(90,145);
drawRC(80,145,2,1);
context.lineTo(20,135);
drawRC(20,125,3,0);
context.lineTo(10,20);

//下部边界
context.moveTo(400,215);
context.lineTo(320,215);
drawRC(320,225,1,1);
context.lineTo(310,245);
drawRC(320,245,3,1);
context.lineTo(380,255);
drawRC(380,265,2,0);
context.lineTo(390,305);
drawRC(380,305,4,0);
context.lineTo(370,315);
drawRC(370,325,1,1);
drawRC(370,325,3,1);
context.lineTo(380,335);
drawRC(380,345,2,0);

context.lineTo(390,380);
drawRC(380,380,4,0);
context.lineTo(220,390);
context.lineTo(20,390);
drawRC(20,380,3,0);
context.lineTo(10,345);
drawRC(20,345,1,0);
context.lineTo(30,335);
drawRC(30,325,4,1);
drawRC(30,325,2,1);
context.lineTo(20,315);
drawRC(20,305,3,0);

context.lineTo(10,265);
drawRC(20,265,1,0);
context.lineTo(80,255);
drawRC(80,245,4,1);
context.lineTo(90,225);
drawRC(80,225,2,1);
context.lineTo(0,215);
context.stroke();           //显示轮廓

}

//绘制单一豆子
function drawBean(x,y,BeanRadius,color)
{
    context.fillStyle=color;
    context.beginPath();
    context.arc(x,y,BeanRadius,0,Math.PI*2,1); //结束点不能直接写0，确定为360度对应的弧度
    context.fill();
}


//绘制所有豆子
function drawAllBeans(BeanRadius,color,spacing)
{
   for(var i=0;i<24;i++)
   drawBean(104,24+i*spacing,BeanRadius,color);
   for(var i=0;i<24;i++)
   drawBean(296,24+i*spacing,BeanRadius,color);
   for(var i=0;i<6;i++)
   drawBean(25,39+i*spacing,BeanRadius,color);
   for(var i=0;i<7;i++)
   drawBean(375,25+i*spacing,BeanRadius,color);
   for(var i=0;i<12;i++)
   drawBean(119+i*spacing,294,BeanRadius,color);
   for(var i=0;i<12;i++)
   drawBean(119+i*spacing,78,BeanRadius,color);
   for(var i=0;i<3;i++)
   drawBean(25,345+i*(spacing+2),BeanRadius,color);
   for(var i=0;i<3;i++)
   drawBean(375,345+i*(spacing+2),BeanRadius,color);
   for(var i=0;i<2;i++)
   drawBean(149,345+i*(spacing+2),BeanRadius,color);
   for(var i=0;i<2;i++)
   drawBean(254,345+i*(spacing+2),BeanRadius,color);
   for(var i=0;i<2;i++)
   drawBean(179,310+i*(spacing+2),BeanRadius,color);
   for(var i=0;i<2;i++)
   drawBean(224,310+i*(spacing+2),BeanRadius,color);
   for(var i=0;i<2;i++)
   drawBean(345,312+i*(spacing+2),BeanRadius,color);
   for(var i=0;i<2;i++)
   drawBean(55,312+i*(spacing+2),BeanRadius,color);
   for(var i=0;i<2;i++)
   drawBean(24,287+i*(spacing+3),BeanRadius,color);
   for(var i=0;i<2;i++)
   drawBean(376,287+i*(spacing+3),BeanRadius,color);
   for(var i=0;i<2;i++)
   drawBean(179,40+i*(spacing+3),BeanRadius,color);
   for(var i=0;i<3;i++)
   drawBean(224,24+i*(spacing+3),BeanRadius,color);
   for(var i=0;i<5;i++)
   drawBean(314+i*spacing,268,BeanRadius,color);
   for(var i=0;i<4;i++)
   drawBean(314+i*spacing,24,BeanRadius,color);
   for(var i=0;i<4;i++)
   drawBean(314+i*spacing,79,BeanRadius,color);
   for(var i=0;i<5;i++)
   drawBean(314+i*spacing,125,BeanRadius,color);
   for(var i=0;i<4;i++)
   drawBean(42+i*spacing,24,BeanRadius,color);
   for(var i=0;i<4;i++)
   drawBean(42+i*spacing,79,BeanRadius,color);
   for(var i=0;i<5;i++)
   drawBean(25+i*spacing,125,BeanRadius,color);
   for(var i=0;i<5;i++)
   drawBean(25+i*spacing,268,BeanRadius,color);
   for(var i=0;i<1;i++)
   drawBean(40+i*spacing,310,BeanRadius,color);
   for(var i=0;i<1;i++)
   drawBean(360+i*spacing,310,BeanRadius,color);
   for(var i=0;i<4;i++)
   drawBean(120+i*spacing,24,BeanRadius,color);
   for(var i=0;i<4;i++)
   drawBean(238+i*spacing,24,BeanRadius,color);
   for(var i=0;i<2;i++)
   drawBean(40+i*spacing,344,BeanRadius,color);
   for(var i=0;i<2;i++)
   drawBean(345+i*spacing,344,BeanRadius,color);
   for(var i=0;i<2;i++)
   drawBean(164+i*spacing,344,BeanRadius,color);
   for(var i=0;i<2;i++)
   drawBean(224+i*spacing,344,BeanRadius,color);

   //最底层
   for(var i=0;i<4;i++)
   drawBean(40+i*spacing,380,BeanRadius,color);
   for(var i=0;i<13;i++)
   drawBean(104+i*spacing,380,BeanRadius,color);
   for(var i=0;i<5;i++)
   drawBean(296+i*spacing,380,BeanRadius,color);
}

//绘制中心圆角矩形
function drawMRR(x,y,w,l,maincolor,doorcolor)
{   
    var Halfw=(w-20)/2;
    var Halfl=(l-20)/2;
    context.strokeStyle=maincolor;
    context.lineWidth=2;
    context.beginPath();
    context.moveTo(x-Halfw,y-Halfl-10);
    context.lineTo(x-Halfw/2,y-Halfl-10);
    context.moveTo(x+Halfw/2,y-Halfl-10);
    context.lineTo(x+Halfw,y-Halfl-10);
    drawRC(x+Halfw,y-Halfl,2,0);
    context.lineTo(x+Halfw+10,y+Halfl);
    drawRC(x+Halfw,y+Halfl,4,0);
    context.lineTo(x-Halfw,y+Halfl+10);
    drawRC(x-Halfw,y+Halfl,3,0);
    context.lineTo(x-Halfw-10,y-Halfl);
    drawRC(x-Halfw,y-Halfl,1,0);
    context.stroke();

    context.strokeStyle=doorcolor;
    context.lineWidth=2;
    context.beginPath();
    context.moveTo(x-Halfw/2,y-Halfl-10);
    context.lineTo(x+Halfw/2,y-Halfl-10);
    context.stroke();
}


//裁剪矩形局域
function drawClip()
{    
    
    baseRect(275,250,20,60);
    baseRect(125,250,20,60);
    baseRect(200,270,80,20);
    baseDT(200,100);
    baseLT(275,140);
    baseRT(125,140);
    context.clip();
    
}


